<template>
  <!--  模态框  -->
  <el-dialog
      v-model="visible"
      :title="props.title"
      :width="props.device === DeviceEnum.MOBILE ? '90%' : '50%'"
      draggable
      overflow
      @close="props.closeDialog()"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <el-form-item label="面具名" prop="name">
        <el-input v-model="form.name"
                  placeholder="请输入面具名"/>
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <icon-selector v-model="form.icon" placeholder="请选择面具图标"/>
      </el-form-item>
      <el-form-item label="Prompt" prop="prompt">
        <el-input v-model="form.prompt"
                  :rows="10"
                  placeholder="请输入System Prompt"
                  type="textarea"/>
      </el-form-item>
      <el-form-item label="面具描述" prop="description">
        <el-input v-model="form.description"
                  :rows="3"
                  placeholder="请输入面具描述"
                  type="textarea"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="props.closeDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {AiMaskForm} from "@/api/ai/manage/mask/type";
import {AiMaskAPI} from "@/api/ai/manage/mask";
import {DictType} from "@/api/system/dict-data/type";
import {DeviceEnum} from "@/enums/DeviceEnum";
import {useCrudActions} from "@/hooks/useCrudActions";
import {FormInstance, FormRules} from "element-plus";

// 组件定义
defineOptions({
  name: "AiMaskManageDialog",
  inheritAttrs: false,
});
// 组件 props & emits
const props = withDefaults(defineProps<{
  currentClickRowId: number | undefined;
  visible: boolean;
  title: string;
  dictData?: Record<DictType | string, Record<any, string>>;
  device?: DeviceEnum;
  closeDialog: (callback?: () => void) => void;
  loadData: (callback?: () => void) => Promise<void>;
}>(), {
  device: DeviceEnum.DESKTOP,
  dictData: () => ({})
});

const emits = defineEmits<{
  (event: "update:visible", visible: boolean): void
}>()

// hooks
const visible = useVModel(props, 'visible', emits)
const {
  saveData,
  updateData
} = useCrudActions<number, AiMaskForm>(AiMaskAPI.SAVE.request, AiMaskAPI.UPDATE.request, undefined, undefined);
// 初始校验规则
const initialForm: AiMaskForm = {
  name: undefined,
  icon: undefined,
  prompt: undefined,
  description: undefined,
}
const rules: FormRules = {
  name: [{required: true, message: "请输入面具名", trigger: "blur"}],
  prompt: [{required: true, message: "请输入System Prompt", trigger: "blur"}],
}
// 数据
const formRef = ref<FormInstance | null>(null);          // 字典数据表单
const form = ref<AiMaskForm>({...initialForm});

// 方法
async function submitForm() {
  const isValid = await formRef.value?.validate(); // 使用 await 简化验证逻辑
  if (!isValid) return; // 验证未通过，直接返回
  // 校验通过后执行 API 请求
  if (props.currentClickRowId) {
    await updateData(props.currentClickRowId, form.value, () => {
      props.closeDialog()
      props.loadData()
    })
  } else {
    await saveData(form.value, () => {
      props.closeDialog()
      props.loadData()
    })
  }
}

// 生命周期
onMounted(() => {
})
</script>

<style lang="scss" scoped>
/* 样式 */
</style>
